<template>
  <el-dialog
    :visible.sync="_show"
    title="选择门店"
    destroy-on-close
    width="60%"
    @open="onOpen()"
  >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-row :span="24">
        <el-col :span="24">
          <el-form-item label="大区">
            <el-select v-model="formInline.upOrgSeq">
              <el-option value>全部大区</el-option>
              <el-option
                v-for="item in warzoneList"
                :key="item.orgSeq"
                :label="item.orgName"
                :value="item.orgSeq"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="店铺名称">
            <el-input v-model="formInline.storeName" style="width:200px" />
          </el-form-item>
          <el-form-item>
            <el-button @click="search()" type="primary" size="mini"
              >查询</el-button
            >
            <el-button @click="kong()" type="primary" size="mini"
              >清空</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      ref="multipleTableRef"
      class="table-main-cls"
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      @selection-change="shopChecked"
      height="500"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        prop="authCode"
        label="授权码"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="storeName"
        label="店铺名称"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="storeOwnerName"
        label="店主姓名"
        width="100"
        header-align="center"
      />
      <el-table-column
        prop="storeAddressDetail"
        label="店铺地址"
        header-align="center"
      />
    </el-table>

    <div class="block" style="margin-top:22px;overflow:hidden">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="_show = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { post } from '../../../utils/request';

export default {
  model: {
    prop: 'dialogVisible',
    event: 'update:dialogVisible',
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    checkedList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      formInline: {
        upOrgSeq: '',
        storeName: '',
      },
      listQuery: {
        current: 1,
        size: 10,
      },
      total: 0,
      tableData: [],
      warzoneList: [],
      currentRowList: [],
    };
  },

  computed: {
    _show: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit('update:dialogVisible', val);
      },
    },
  },

  methods: {
    onOpen() {
      this.listQuery = this.$options.data().listQuery;
      this.search();
      post('/api/user-service/v1/detail/getWarzoneList').then((res) => {
        if (res.code == 1) {
          this.warzoneList = res.records;
        }
      });
    },
    search() {
      post('/api/user-service/v1/organization/queryStoreInfo', {
        condition: this.formInline,
        ...this.listQuery,
      }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.records;
          this.total = res.total;
          this.listQuery.current = res.current;
          this.listQuery.size = res.size;
          this.$nextTick(() => {
            this.checkedListHandle();
          });
        }
      });
    },
    kong() {
      this.formInline = this.$options.data().formInline;
    },

    // 多选框选中数据
    checkedListHandle() {
      if (this.checkedList.length > 0) {
        this.checkedList.forEach((item) => {
          const curItem = this.tableData.find((o) => o.uuid === item.uuid);
          curItem &&
            this.$refs.multipleTableRef.toggleRowSelection(curItem, true);
        });
      }
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    },

    shopChecked(val) {
      this.currentRowList = val;
    },

    onSubmit() {
      this.$emit('update:checkedList', this.currentRowList);
      this.$emit('change', this.currentRowList);
      this._show = false;
    },
  },
};
</script>
